// 照片数据
const photos = [
    {
        id: 1,
        url: "https://kimi-web-img.moonshot.cn/img/img.freepik.com/afd3a1b6577bc1b547c89e4e7324c103cad772e4.jpg",
        title: "抽象色彩",
        category: "abstract",
        description: "充满活力的抽象色彩图案"
    },
    {
        id: 2,
        url: "https://kimi-web-img.moonshot.cn/img/architectureprize.com/5eb77aa5af25489788e46804bb4289761dd5f9d7.webp",
        title: "现代建筑",
        category: "architecture",
        description: "现代建筑设计的美学表达"
    },
    {
        id: 3,
        url: "https://kimi-web-img.moonshot.cn/img/admin.itsnicethat.com/4151e39994593fad4798c351ebca8e6394470755.png",
        title: "建筑线条",
        category: "architecture",
        description: "建筑线条的几何美学"
    },
    {
        id: 4,
        url: "https://kimi-web-img.moonshot.cn/img/img.andrewprokos.com/19a99215642551af3d3ed32cc1a8f04eacdbdeae.jpg",
        title: "城市建筑",
        category: "architecture",
        description: "城市建筑的光影变化"
    },
    {
        id: 5,
        url: "https://kimi-web-img.moonshot.cn/img/thumbs.dreamstime.com/489aeb8687136c4d1e062a849596ebd83d37677f.jpg",
        title: "彩色抽象",
        category: "abstract",
        description: "彩色抽象艺术设计"
    },
    {
        id: 6,
        url: "https://kimi-web-img.moonshot.cn/img/images.pexels.com/841a88921a9acf5f205d1252e4187584bdc77db9.jpeg",
        title: "森林瀑布",
        category: "nature",
        description: "森林中的壮观瀑布景观"
    },
    {
        id: 7,
        url: "https://kimi-web-img.moonshot.cn/img/www.adorama.com/9da13e92cbdcd4c82f2cf9ca54111285b1e2a22b.jpg",
        title: "光影抽象",
        category: "abstract",
        description: "光影交错的抽象艺术"
    },
    {
        id: 8,
        url: "https://kimi-web-img.moonshot.cn/img/www.jinbei-deutschland.de/69ed527199a2753d1288ecf51b9ae954b77c4859.png",
        title: "建筑结构",
        category: "architecture",
        description: "建筑结构的对称美学"
    },
    {
        id: 9,
        url: "https://kimi-web-img.moonshot.cn/img/www.josephfiler.com/3933d30a031971540a8a930f84d2d2f8065f4727.jpg",
        title: "自然瀑布",
        category: "nature",
        description: "自然瀑布的磅礴气势"
    },
    {
        id: 10,
        url: "https://kimi-web-img.moonshot.cn/img/images.fineartamerica.com/cff7bfab0ee7255ac996574aad5feee66042e31c.jpg",
        title: "山峦日落",
        category: "landscape",
        description: "山峦间的壮丽日落景色"
    },
    {
        id: 11,
        url: "https://kimi-web-img.moonshot.cn/img/media.wired.com/6e61d026839dbed4912d6fee5fc2fffd74eb3ac4.jpg",
        title: "现代设计",
        category: "architecture",
        description: "现代建筑设计的创新理念"
    },
    {
        id: 12,
        url: "https://kimi-web-img.moonshot.cn/img/eskipaper.com/1e6284312cd96346ffeac6835584f4ca1dc44e19.jpg",
        title: "森林溪流",
        category: "nature",
        description: "森林溪流的宁静美景"
    },
    {
        id: 13,
        url: "https://kimi-web-img.moonshot.cn/img/media.posterstore.com/53eb69df01aae99c2d8a06b5584df861429b6998.jpg",
        title: "绿意盎然",
        category: "nature",
        description: "充满生机的绿色自然景观"
    },
    {
        id: 14,
        url: "https://kimi-web-img.moonshot.cn/img/www.mountainphotography.com/7f3cc98bd4350b3e432bfc12fee3642c640b2055.jpg",
        title: "山峰日落",
        category: "landscape",
        description: "山峰上的金色日落"
    },
    {
        id: 15,
        url: "https://kimi-web-img.moonshot.cn/img/wallup.net/e22d45873845c8176d49f335e9987f0d84f99112.jpg",
        title: "日落山景",
        category: "landscape",
        description: "日落时分的山峦剪影"
    },
    {
        id: 16,
        url: "https://kimi-web-img.moonshot.cn/img/images.squarespace-cdn.com/ad5550b37189efe6447c3572cebf1491a88aa101.jpg",
        title: "都市生活",
        category: "street",
        description: "繁忙都市中的生活瞬间"
    },
    {
        id: 17,
        url: "https://kimi-web-img.moonshot.cn/img/expertphotography.b-cdn.net/934290e74ae8416a3e34f47f312e05f655b064e9.jpg",
        title: "街头瞬间",
        category: "street",
        description: "街头摄影的人文纪实"
    },
    {
        id: 18,
        url: "https://kimi-web-img.moonshot.cn/img/cdn.expertphotography.com/f50c7a176769ef064b8727ef1df4b6ad1d6cc8a0.jpg",
        title: "城市街拍",
        category: "street",
        description: "城市街头的生动画面"
    },
    {
        id: 19,
        url: "https://kimi-web-img.moonshot.cn/img/121clicks.com/c8b5521abc4abe51ef86bd25440790bf8c46ec7a.jpg",
        title: "微观世界",
        category: "macro",
        description: "微距摄影展现的精细世界"
    },
    {
        id: 20,
        url: "https://kimi-web-img.moonshot.cn/img/cdn.photoworkout.com/4dacec1353d8fdc2f527840677456a936151f712.jpg",
        title: "都市夜景",
        category: "street",
        description: "城市夜晚的璀璨灯火"
    },
    {
        id: 21,
        url: "https://kimi-web-img.moonshot.cn/img/ejazkhanphotography.com/51b79df651bfb5cc8e9b2d26c81764db8808cb1d.jpg",
        title: "黑白艺术",
        category: "blackwhite",
        description: "经典黑白摄影艺术作品"
    },
    {
        id: 22,
        url: "https://kimi-web-img.moonshot.cn/img/i0.wp.com/cc60166bcb7f30fecde773cc4b98d67e4e2c461e.jpg",
        title: "街头光影",
        category: "street",
        description: "街头光影的戏剧性表现"
    },
    {
        id: 23,
        url: "https://kimi-web-img.moonshot.cn/img/colethompsonphotography.com/c33bf77562ebfe1813be92aff4b2e82b2478fd2d.jpg",
        title: "黑白意境",
        category: "blackwhite",
        description: "黑白摄影的深度意境"
    },
    {
        id: 24,
        url: "https://kimi-web-img.moonshot.cn/img/static1.squarespace.com/b298e8efcf17a9ff5d24e21010f9a63969733d8c.jpg",
        title: "城市节奏",
        category: "street",
        description: "城市生活的快节奏瞬间"
    },
    {
        id: 25,
        url: "https://kimi-web-img.moonshot.cn/img/www.juliaannagospodarou.com/7185e2a3fb4f2191dec59af2d99bbc13c3d46a27.jpg",
        title: "黑白建筑",
        category: "blackwhite",
        description: "黑白建筑摄影的经典美学"
    },
    {
        id: 26,
        url: "https://kimi-web-img.moonshot.cn/img/photographylife.com/4ff3594997a33232a83b2989b975b760f7e1336a.jpg",
        title: "单色艺术",
        category: "blackwhite",
        description: "单色摄影的艺术魅力"
    },
    {
        id: 27,
        url: "https://kimi-web-img.moonshot.cn/img/rozenbergquarterly.com/d443f15900bfe69329cafa99ee412b4584e8442d.jpg",
        title: "都市印象",
        category: "street",
        description: "现代都市的视觉印象"
    }
];

// 分类标签
const categories = [
    { id: 'all', name: '全部', color: 'bg-gray-500' },
    { id: 'landscape', name: '风景', color: 'bg-green-500' },
    { id: 'architecture', name: '建筑', color: 'bg-blue-500' },
    { id: 'nature', name: '自然', color: 'bg-emerald-500' },
    { id: 'street', name: '街拍', color: 'bg-purple-500' },
    { id: 'abstract', name: '抽象', color: 'bg-pink-500' },
    { id: 'blackwhite', name: '黑白', color: 'bg-gray-700' }
];

// 当前状态
let currentFilter = 'all';
let currentLayout = 'masonry';
let lightboxOpen = false;
let currentLightboxIndex = 0;

// DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
    
    // 如果authManager已加载，更新UI
    if (typeof authManager !== 'undefined') {
        authManager.updateUI();
    }
});

// 初始化应用
function initializeApp() {
    createParticles();
    initializeAnimations();
    loadFeaturedPhotos();
    setupScrollReveal();
    setupEventListeners();
}

// 创建浮动粒子
function createParticles() {
    const particlesContainer = document.getElementById('particles');
    const particleCount = 50;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.top = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 6 + 's';
        particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
        particlesContainer.appendChild(particle);
    }
}

// 初始化动画
function initializeAnimations() {
    // 英雄区域标题动画
    anime({
        targets: '#hero-title',
        opacity: [0, 1],
        translateY: [50, 0],
        duration: 1000,
        easing: 'easeOutExpo',
        delay: 500
    });
    
    // 英雄区域副标题动画
    anime({
        targets: '#hero-subtitle',
        opacity: [0, 1],
        translateY: [30, 0],
        duration: 800,
        easing: 'easeOutExpo',
        delay: 800
    });
    
    // 英雄区域按钮动画
    anime({
        targets: '#hero-buttons',
        opacity: [0, 1],
        translateY: [20, 0],
        duration: 600,
        easing: 'easeOutExpo',
        delay: 1200
    });
}

// 加载精选照片
function loadFeaturedPhotos() {
    const featuredGallery = document.getElementById('featured-gallery');
    const featuredPhotos = photos.slice(0, 8); // 选择前8张照片作为精选
    
    featuredPhotos.forEach((photo, index) => {
        const photoElement = createPhotoElement(photo, index);
        featuredGallery.appendChild(photoElement);
    });
    
    // 添加点击事件
    setupPhotoClickEvents();
}

// 创建照片元素
function createPhotoElement(photo, index) {
    const div = document.createElement('div');
    div.className = 'masonry-item photo-card scroll-reveal';
    div.dataset.category = photo.category;
    div.dataset.index = index;
    
    div.innerHTML = `
        <div class="relative overflow-hidden rounded-lg bg-gray-800">
            <img src="${photo.url}" alt="${photo.title}" 
                 class="w-full h-auto object-cover transition-all duration-300 hover:scale-105"
                 loading="lazy">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300">
                <div class="absolute bottom-0 left-0 right-0 p-4">
                    <h3 class="text-white font-semibold text-lg mb-1">${photo.title}</h3>
                    <p class="text-gray-300 text-sm">${photo.description}</p>
                </div>
            </div>
        </div>
    `;
    
    return div;
}

// 设置照片点击事件
function setupPhotoClickEvents() {
    const photoCards = document.querySelectorAll('.photo-card');
    photoCards.forEach(card => {
        card.addEventListener('click', function() {
            const index = parseInt(this.dataset.index);
            openLightbox(index);
        });
    });
}

// 打开灯箱
function openLightbox(index) {
    currentLightboxIndex = index;
    lightboxOpen = true;
    
    const lightbox = createLightbox();
    document.body.appendChild(lightbox);
    
    // 动画显示
    anime({
        targets: lightbox,
        opacity: [0, 1],
        duration: 300,
        easing: 'easeOutExpo'
    });
    
    // 禁止背景滚动
    document.body.style.overflow = 'hidden';
}

// 创建灯箱
function createLightbox() {
    const lightbox = document.createElement('div');
    lightbox.className = 'fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center';
    lightbox.id = 'lightbox';
    
    const photo = photos[currentLightboxIndex];
    
    lightbox.innerHTML = `
        <div class="relative max-w-4xl max-h-full p-4">
            <button onclick="closeLightbox()" class="absolute top-4 right-4 text-white hover:text-yellow-400 z-10">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            
            <button onclick="previousPhoto()" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white hover:text-yellow-400 z-10">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>
            
            <button onclick="nextPhoto()" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white hover:text-yellow-400 z-10">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>
            
            <div class="text-center">
                <img src="${photo.url}" alt="${photo.title}" class="max-w-full max-h-96 object-contain rounded-lg mb-4">
                <h3 class="text-2xl font-bold text-white mb-2">${photo.title}</h3>
                <p class="text-gray-300 mb-4">${photo.description}</p>
                <div class="flex justify-center space-x-4">
                    <button onclick="toggleFavorite(${photo.id})" class="flex items-center text-yellow-400 hover:text-yellow-300">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                        收藏
                    </button>
                    <button onclick="sharePhoto(${photo.id})" class="flex items-center text-blue-400 hover:text-blue-300">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                        </svg>
                        分享
                    </button>
                </div>
            </div>
        </div>
    `;
    
    return lightbox;
}

// 关闭灯箱
function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    if (lightbox) {
        anime({
            targets: lightbox,
            opacity: [1, 0],
            duration: 200,
            easing: 'easeOutExpo',
            complete: function() {
                lightbox.remove();
            }
        });
    }
    
    lightboxOpen = false;
    document.body.style.overflow = 'auto';
}

// 上一张照片
function previousPhoto() {
    currentLightboxIndex = (currentLightboxIndex - 1 + photos.length) % photos.length;
    updateLightboxContent();
}

// 下一张照片
function nextPhoto() {
    currentLightboxIndex = (currentLightboxIndex + 1) % photos.length;
    updateLightboxContent();
}

// 更新灯箱内容
function updateLightboxContent() {
    const lightbox = document.getElementById('lightbox');
    const photo = photos[currentLightboxIndex];
    
    const img = lightbox.querySelector('img');
    const title = lightbox.querySelector('h3');
    const description = lightbox.querySelector('p');
    
    // 淡出动画
    anime({
        targets: [img, title, description],
        opacity: [1, 0],
        duration: 150,
        easing: 'easeOutExpo',
        complete: function() {
            // 更新内容
            img.src = photo.url;
            img.alt = photo.title;
            title.textContent = photo.title;
            description.textContent = photo.description;
            
            // 淡入动画
            anime({
                targets: [img, title, description],
                opacity: [0, 1],
                duration: 150,
                easing: 'easeOutExpo'
            });
        }
    });
}

// 切换收藏状态
function toggleFavorite(photoId) {
    // 这里可以实现收藏功能
    console.log('Toggle favorite for photo:', photoId);
    alert('收藏功能开发中...');
}

// 分享照片
function sharePhoto(photoId) {
    // 这里可以实现分享功能
    console.log('Share photo:', photoId);
    alert('分享功能开发中...');
}

// 滚动到画廊
function scrollToGallery() {
    const featuredSection = document.getElementById('featured');
    featuredSection.scrollIntoView({ behavior: 'smooth' });
}

// 设置滚动显示动画
function setupScrollReveal() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('revealed');
            }
        });
    }, observerOptions);
    
    // 观察所有需要滚动显示的元素
    document.querySelectorAll('.scroll-reveal').forEach(el => {
        observer.observe(el);
    });
}

// 设置事件监听器
function setupEventListeners() {
    // 键盘事件
    document.addEventListener('keydown', function(e) {
        if (lightboxOpen) {
            switch(e.key) {
                case 'Escape':
                    closeLightbox();
                    break;
                case 'ArrowLeft':
                    previousPhoto();
                    break;
                case 'ArrowRight':
                    nextPhoto();
                    break;
            }
        }
    });
    
    // 平滑滚动导航
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // 导航栏滚动效果
    let lastScrollTop = 0;
    const nav = document.querySelector('nav');
    
    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop && scrollTop > 100) {
            // 向下滚动，隐藏导航栏
            nav.style.transform = 'translateY(-100%)';
        } else {
            // 向上滚动，显示导航栏
            nav.style.transform = 'translateY(0)';
        }
        
        lastScrollTop = scrollTop;
    });
}

// 工具函数：防抖
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 工具函数：节流
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}